<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>单行多行文字显示省略号</title>
  </head>

  <style>
    .nowrap {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .multiple-line {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      /*将对象作为弹性伸缩盒子模型显示。*/
      -webkit-box-orient: vertical;
      /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
      -webkit-line-clamp: 2;
      /*这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。*/
    }
  </style>
  <body>
    <div class="nowrap">
      “有时下夜班，仰望星空，觉得群星就像发光的沙漠，我自己就是一个被丢弃在沙漠上的可怜的孩子……我有那种感觉：地球生命真的是宇宙中的偶然里的偶然，宇宙是个空荡荡的大宫殿，人类是这宫殿中唯一的一只蚂蚁。这想法让我的后半辈子有一种很矛盾的心态：有时
      觉得生命真珍贵，一切都重于泰山；有时觉得人是那么渺小，什么都不值得一提。反正日子就在这种奇怪的感觉中一天天过去，不知不觉人就老了……”
    </div>
    <br />
    <div class="multiple-line">
      无限长的曲线就是宇宙的抽象，一头连着无限的过去，另一头连着无限的未来，中间只有无规律无生命的随机起伏，一个个高低错落的波峰就像一粒粒大小不等的沙子，整条曲线就像是所有沙粒排成行形成的一维沙漠，荒凉寂寥，长得更令人无法忍受。你可以沿着它向前向后走无限远，但永远找不到归宿。。
    </div>
  </body>
</html>
